  <template>
    <div>
      姓：<input type="text" v-model="data.lastName">
    </div>
    <div>
      名：<input type="text" v-model="data.firstName">
    </div>
    <span>{{fullName}}</span>
    <br>
    可修改<input type="text" v-model="fullName">
  </template>
  
  <script>
  import {reactive,computed} from 'vue'
  export default {
    name: 'App',
    // vue2的计算属性
    // computed:{
    //   fullName(){
    //     return `${this.data.lastName}-${this.data.firstName}`
    //   }
    // },
    setup(){
      let data = reactive({
        firstName:'三',
        lastName:'张'
      })
      // vue3 的计算属性 - 接收一个回调函数 返回值 - 简写
      // let fullName = computed(()=>{
      //   return `${data.lastName} - ${data.firstName}`
      // })

      //  vue3 的计算属性 - 接收一个回调函数 返回值 - 完整写法
      let fullName = computed({
        get(){
          return `${data.lastName}-${data.firstName}`
        },
        set(value){
          let arrName = value.split('-');
          data.lastName = arrName[0];
          data.firstName = arrName[1]
        }
      })
      return {
        data,
        fullName
      }
    }
    
  }
  </script>
  
  <style>
  
  </style>
  